<template>
  <div>
    <!-- <div class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" @click.native="goBack">开业管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">保存</el-button>
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div> -->
    <!-- 门店信息 -->
    <div style="display:flex;flex-direction:row-reverse;margin-top:10px">
      <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">保存</el-button>
    </div>
    <div style="margin-top:20px" class="qup-title-box"><span class="border" /><span>门店建设基础信息</span></div>
    <el-form
      ref="refForm1"
      :rules="formRules"
      :model="formData"
      size="mini"
      label-width="150px"
    >
      <el-row>
        <el-col :span="8">
          <!--门店建设项目号自动带出一下门店信息 -->
          <el-form-item label="门店建设项目号:" prop="constCode">
            <input-with-dialog
              v-model="construction"
              placeholder="请输入门店建设项目号"
              :props="{label:'constCode',value:'constCode'}"
              :config="dialogConfigConst"
              @change="handleChangeConst"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门店建设整体进度:" prop="constSchedule">
            <el-select
              v-model="detailData.constSchedule"
              placeholder="——"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in shopConstOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="门店:" prop="shopName">
            <el-input v-model="detailData.shopName" placeholder="——" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属客户:" prop="clientName">
            <el-input v-model="detailData.clientName" placeholder="——" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属办事处:" prop="officeName">
            <el-input v-model="detailData.officeName" placeholder="——" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="门店类型:" prop="shopConstructDTO">
            <el-select
              v-model="detailData.shopType"
              placeholder="——"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in shopTypeOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门店业务类型:" prop="shopBizType">
            <el-select
              v-model="detailData.shopBizType"
              placeholder="——"
              multiple
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in shopBizTypeOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门店城市级别:" prop="shopCityLevel">
            <el-select
              v-model="detailData.shopCityLevel"
              placeholder="——"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in cityLevelOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="门店市场级别:" prop="shopMarketLevel">
            <el-select
              v-model="detailData.shopMarketLevel"
              placeholder="——"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in shopLevelOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门店详细地址:" prop="shopAddress">
            <el-input v-model="detailData.shopAddress" placeholder="——" type="textarea" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="报图类型:" prop="marketType">
            <el-select
              v-model="detailData.marketType"
              placeholder="——"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in marketTypeOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门店建设类型:" prop="constType">
            <el-select
              v-model="detailData.constType"
              multiple
              placeholder="——"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in constTypeOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商家类别:" prop="bizmanType">
            <el-select
              v-model="detailData.bizmanType"
              placeholder="——"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in bizmanTypeOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="装修形式:" prop="decorationForm">
            <el-select
              v-model="detailData.decorationForm"
              placeholder="——"
              multiple
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in decorationFormOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="装修范围:" prop="decorationRange">
            <el-select
              v-model="detailData.decorationRange"
              placeholder="——"
              multiple
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in rangeOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否交接市场:" prop="isHandover">
            <el-select v-model="detailData.isHandover" disabled placeholder="请选择">
              <el-option label="是" :value="1" />
              <el-option label="否 " :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="交接前门店:" prop="beforeShopName">
            <el-input v-model="detailData.beforeShopName" placeholder="——" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交接前门店建设整体进度:" prop="beforeConstSchedule">
            <el-select
              v-model="detailData.beforeConstSchedule"
              placeholder="——"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in shopConstOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="市场交接时间:" prop="handoverTime">
            <el-input v-model="detailData.handoverTime" placeholder="——" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="qup-title-box"><span class="border" /><span>开业推广明细</span></div>
    <el-form
      ref="refForm2"
      :rules="formRules"
      :model="formData"
      size="mini"
      label-width="150px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="开业广告支持金额:" prop="advertAmount">
            <el-input v-model.number="formData.advertAmount">
              <span slot="suffix">元</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开业广告支持金额范围:" prop="advertAmountRange">
            <el-select
              v-model="formData.advertAmountRange"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in amountRangeOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划开业活动开始日期:" prop="planActivityStartTime">
            <el-date-picker
              v-model="formData.planActivityStartTime"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="mini"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="计划开业活动截止日期:" prop="planActivityEndTime">
            <el-date-picker
              v-model="formData.planActivityEndTime"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="mini"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="活动主题:" prop="activityTheme">
            <el-input v-model="formData.activityTheme" maxlength="1000" show-word-limit placeholder="请输入活动主题" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 附件上传  -->
    <div
      v-for="item in fileTypeList"
      :key="item.id"
    >
      <div class="qup-title-box"><span class="border" /><span>附件上传-{{ item.attachmentType }}</span></div>
      <import-file
        :data="item.fileList"
        :file-type="item.fileTypeName"
        :config-attachment-id="item.id||''"
        :limit="20"
      />
    </div>
  </div>
</template>
<script>
import importFile from '@/components/importFile'
import { saveOpenData, postConfigAttachmentTemplate } from '@/api/shopOpenManage'
import { getDictByPatchType } from '@/api/dataDict'
import BackPageMixin from '@/mixins/backPage'
import { getShopAttachment } from '@/api/common.js'
export default {
  name: 'OpeningAdd',
  components: { importFile },
  mixins: [BackPageMixin],
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      detailData: {},
      saveLoading: false,
      construction: [],
      otherFileList: [],
      fileLength: 0,
      shopConstOptions: [], // 门店建设整体进度
      shopTypeOptions: [], // 门店类型
      shopBizTypeOptions: [], // 门店业务类型
      cityLevelOptions: [], // 城市级别
      shopLevelOptions: [], // 门店市场级别
      marketTypeOptions: [], // 报图类型
      constTypeOptions: [], // 门店建设类型
      bizmanTypeOptions: [], // 商家类别
      decorationFormOptions: [], // 装修形式
      rangeOptions: [], // 装修范围
      fileTypeList: [],
      dialogConfigConst: {
        title: '门店建设项目号',
        filtersRaw: [{ 'id': 'constState', 'property': 'constState', 'operator': '<>', 'value': 'B' },
          { 'id': 'dr', 'property': 'dr', 'operator': '=', 'value': '0' },
          { 'id': 'isEnd', 'property': 'isEnd', 'operator': '=', 'value': '0' }
        ],
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/shopConstruct/allPage`,
        setting: [{ prop: 'constCode', title: '门店建设项目号' }, { prop: 'shopName', title: '门店名称' }, { prop: 'shopCode', title: '门店编码' }]
      },
      formRules: {
        constCode: [
          { required: true, message: '请填写门店建设项目号', trigger: 'change' }
        ],
        advertAmount: [
          { required: true, message: '请填写开业广告支持金额', trigger: 'change' },
          { pattern: /^[0-9]+$/, message: '只能输入数字' }
        ],
        advertAmountRange: [
          { required: true, message: '请选择开业广告支持金额范围', trigger: 'change' }
        ],
        planActivityStartTime: [
          { required: true, message: '请选择计划开业活动开始日期', trigger: 'change' }
        ],
        planActivityEndTime: [
          { required: true, message: '请选择计划开业活动截止日期', trigger: 'change' }
        ],
        activityTheme: [
          { required: true, message: '请输入主题活动', trigger: 'change' }
        ]
      },
      amountRangeOptions: [], // 开业广告支持金额范围
      formData: { constCode: '' }
    }
  },
  async created() {
    await postConfigAttachmentTemplate().then(res => {
      if (res.success === 1) {
        // 根据modelId获取每个配置id
        this.fileTypeList = res.data.records.filter(el => el.enable === 1 && el.attachmentType === '活动方案' || el.attachmentType === '活动推进表' || el.attachmentType === 'DM单正反面图片')
        this.fileTypeList.forEach(row => {
          this.$set(row, 'fileList', [])
        })
      }
    })
    if (this.id) {
      this.getFiles()// 获取文件，图片列表
    }
    this.construction = [{ constCode: this.formData.constCode }]
    this.getDictByPatchTypeAll()
  },
  methods: {
    // 获取附件
    getFiles() {
      getShopAttachment(this.id).then(res => {
        res.data.forEach(row => {
          row.fileList = this.fileTypeList.filter(i => i.id === row.configAttachmentId)
          if (row.attachmentType !== '活动方案' || row.attachmentType !== '活动推进表' || row.attachmentType !== 'DM单正反面照片') this.otherFileList.push(row)
        })
      })
    },
    // 门店建设项目号改变
    handleChangeConst(data) {
      if (data.length !== 0) {
        this.getDictByPatchTypeShop()
        this.detailData = data[0]
        this.formData.constCode = data[0].constCode// 门店建设项目号
        this.detailData.shopBizType = data[0].shopBizType ? data[0].shopBizType.split(',') : []
        this.detailData.decorationForm = data[0].decorationForm ? data[0].decorationForm.split(',') : []
        this.detailData.decorationRange = data[0].decorationRange ? data[0].decorationRange.split(',') : []
        this.detailData.constType = data[0].constType ? data[0].constType.split(',') : []
      }
    },
    submitForm() {
      this.$refs['refForm1'].validate((valid1) => {
        if (valid1) {
          this.$refs['refForm2'].validate((valid2) => {
            if (valid2) {
              this.$set(this.formData, 'shopAttachmentDTOList', [...this.otherFileList])
              this.fileTypeList.forEach(row => {
                this.formData.shopAttachmentDTOList.push(...row.fileList)
              })
              if (this.formData.shopAttachmentDTOList.length === 0) {
                this.$message.warning('请上传附件')
                return
              }

              this.saveLoading = true
              saveOpenData(this.formData).then(res => {
                if (res.success === 1) {
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                  this.$store.dispatch('views/goBack')// 返回列表页
                  this.saveLoading = false
                }
              }).catch(() => {
                this.saveLoading = false
              })
            }
          })
        }
      })
    },
    async  getDictByPatchTypeShop() {
      const { BEFORE_CONST_SCHEDULE, SHOP_TYPE, BIZ_TYPE, CITY_LEVEL, MARKET_LEVEL, MARKET_TYPE, CONST_TYPE, BIZMAN_TYPE, DECORATION_FORM, DECORATION_RANGE } =
      await getDictByPatchType(['BEFORE_CONST_SCHEDULE', 'SHOP_TYPE', 'BIZ_TYPE', 'CITY_LEVEL', 'MARKET_LEVEL', 'MARKET_TYPE', 'CONST_TYPE', 'BIZMAN_TYPE', 'DECORATION_FORM', 'DECORATION_RANGE'])
      this.shopConstOptions = BEFORE_CONST_SCHEDULE // 门店建设整体进度
      this.shopTypeOptions = SHOP_TYPE // 门店类型
      this.shopBizTypeOptions = BIZ_TYPE // 门店业务类型
      this.cityLevelOptions = CITY_LEVEL // 城市级别
      this.shopLevelOptions = MARKET_LEVEL // 门店市场级别
      this.marketTypeOptions = MARKET_TYPE // 报图类型
      this.constTypeOptions = CONST_TYPE // 门店建设类型
      this.bizmanTypeOptions = BIZMAN_TYPE // 商家类别
      this.decorationFormOptions = DECORATION_FORM // 装修形式
      this.rangeOptions = DECORATION_RANGE // 装修范围
    },
    async getDictByPatchTypeAll() {
      const { ADVERT_AMOUNT_RANGE } =
       await getDictByPatchType(['ADVERT_AMOUNT_RANGE'])
      this.amountRangeOptions = ADVERT_AMOUNT_RANGE
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
